import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { X } from 'lucide-react';
export const CookieBanner = () => {
  const [isVisible, setIsVisible] = useState(false);
  useEffect(() => {
    // Check if user has already accepted cookies
    const cookiesAccepted = localStorage.getItem('cookiesAccepted');
    if (!cookiesAccepted) {
      // Show banner after a short delay
      const timer = setTimeout(() => {
        setIsVisible(true);
      }, 1000);
      return () => clearTimeout(timer);
    }
  }, []);
  const acceptCookies = () => {
    localStorage.setItem('cookiesAccepted', 'true');
    setIsVisible(false);
  };
  if (!isVisible) return null;
  return <div className="fixed bottom-0 inset-x-0 z-50 bg-white shadow-lg border-t border-gray-200 p-4 md:flex md:items-center md:justify-between animate-slide-up">
      <div className="md:flex-1 md:pr-4">
        <p className="text-sm text-gray-700">
          We use cookies to enhance your browsing experience, serve personalized
          ads or content, and analyze our traffic. By clicking "Accept All", you
          consent to our use of cookies.
        </p>
        <div className="mt-2 flex space-x-4">
          <Link to="/privacy-policy" className="text-xs text-[#0e4c92] hover:underline">
            Privacy Policy
          </Link>
          <Link to="/terms-of-service" className="text-xs text-[#0e4c92] hover:underline">
            Terms of Service
          </Link>
        </div>
      </div>
      <div className="mt-4 md:mt-0 flex space-x-3 md:flex-shrink-0">
        <button onClick={acceptCookies} className="flex-1 md:flex-none px-4 py-2 bg-[#0e4c92] text-white text-sm font-medium rounded-md hover:bg-[#0a3a70] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#0e4c92]">
          Accept All
        </button>
        <button onClick={acceptCookies} className="flex-1 md:flex-none px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#5cb8b2]">
          Reject Non-Essential
        </button>
        <button onClick={() => setIsVisible(false)} className="p-1 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none">
          <X className="h-5 w-5" />
        </button>
      </div>
    </div>;
};